<template>
  <div class="divBox">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <div class="btn_bt">
          <el-button class="mr10" size="small" type="primary" icon="el-icon-circle-plus-outline" @click="add()">添加语言</el-button>
        </div>
      </div>
      <el-table border ref="table" v-loading="loading" :data="tableData.data" style="width: 100%" size="mini"
        highlight-current-row>
        <el-table-column prop="id" label="ID" min-width="100" />
        <el-table-column prop="languageName" label="语言名称" min-width="150">
          <template slot-scope="scope">
            <div style="display: flex;justify-content: flex-start;align-items: center;">
              <div>{{scope.row.languageName}}</div><el-button style="margin-left: 20px;" type="primary" size="mini"
                v-if="scope.row.isDefault == 1">默认</el-button>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="fileName" label="语言识别码" min-width="150" />
        <el-table-column prop="status" label="状态" min-width="150">
          <template slot-scope="scope">
            <el-switch v-model="scope.row.status" active-text="开启" inactive-text="关闭" :active-value="1"
              :inactive-value="2" disabled>
            </el-switch>
          </template>
        </el-table-column>
        <el-table-column label="操作" min-width="200" fixed="right" align="center">
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="handleEdit(scope.row)">编辑</el-button>
            <el-button type="text" size="small" @click="handleDel(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="block">
        <el-pagination :page-sizes="[15, 30, 45, 60]" :page-size="from.limit" :current-page="from.page"
          layout="total, sizes, prev, pager, next, jumper" :total="tableData.total" @size-change="handleSizeChange"
          @current-change="pageChange" />
      </div>
    </el-card>

    <el-dialog :title="ruleForm.id?'修改语言类型':'新增语言类型'" :visible.sync="dialogVisible" width="40%"
      :close-on-click-modal="false" :close-on-press-escape="false">
      <el-form :rules="rules" ref="ruleForm" :model="ruleForm" label-width="120px">
        <el-form-item label="语言名称：" prop="languageName">
          <el-input v-model="ruleForm.languageName" placeholder="请输入语言名称"></el-input>
        </el-form-item>
        <el-form-item label="语言标识：" prop="fileName">
          <el-select v-model="ruleForm.fileName" placeholder="请选择语言标识">
            <el-option v-for="item in options" :key="item.id" :label="item.name" :value="item.code">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="是否默认：">
          <el-radio-group v-model="ruleForm.isDefault">
            <el-radio :label="1">默认</el-radio>
            <el-radio :label="2">不默认</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="状态：">
          <el-radio-group v-model="ruleForm.status">
            <el-radio :label="1">开启</el-radio>
            <el-radio :label="2">关闭</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="close()">取 消</el-button>
        <el-button type="primary" @click="submit()">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
  import {
    langcountryGetOption,
    langtypeList,
    langtypeSaveLanguage,
    langtypeInfo,
    langtypeUpdate,
    langtypeDelete,
  } from '@/api/language'
  export default {
    name: 'lang',
    data() {
      return {
        options: [],
        from: {
          page: 1,
          limit: 15,
        },
        loading: false,
        tableData: {
          data: [],
          total: 0
        },
        dialogVisible: false,
        ruleForm: {
          id: '',
          languageName: '',
          fileName: '',
          isDefault: 2,
          status: 1
        },
        rules: {
          languageName: [{
            required: true,
            message: '请输入语言名称',
            trigger: 'blur'
          }],
          fileName: [{
            required: true,
            message: '请选择语言标识',
            trigger: 'change'
          }],
        }
      };
    },
    created() {
      langcountryGetOption().then(res => {
        console.log('地区全列表', res)
        this.options = res
        this.getlist();
      }).catch(err => {
        console.log(err)
      })
    },
    methods: {
      add() {
        this.ruleForm = {
          id: '',
          languageName: '',
          fileName: '',
          isDefault: 2,
          status: 1
        }
        this.dialogVisible = true
      },
      handleEdit(row) {
        console.log('编辑', row)
        langtypeInfo(row.id).then(res => {
          console.log('详情', res)
          this.ruleForm = {
            id: res.id,
            languageName: res.languageName,
            fileName: res.fileName,
            isDefault: Number(res.isDefault),
            status: Number(res.status)
          }
          this.dialogVisible = true
        }).catch(err => {
          console.log(err)
          this.$message.error(err)
        })
      },
      handleDel(row) {
        this.$confirm('确认删除？')
          .then(_ => {
            console.log('删除', row)
            langtypeDelete([row.id]).then(res => {
              console.log(res)
              this.$message.success('删除成功')
              this.getlist()
            }).catch(err => {
              console.log(err)
              this.$message.error(err)
            })
          })
          .catch(_ => {});
      },
      close() {
        this.ruleForm = {
          id: '',
          languageName: '',
          fileName: '',
          isDefault: 2,
          status: 1
        }
        this.dialogVisible = false
      },
      submit() {
        this.$refs['ruleForm'].validate((valid) => {
          if (valid) {
            if (this.ruleForm.id) {
              console.log('编辑', this.ruleForm)
              langtypeUpdate(this.ruleForm).then(res => {
                console.log(res)
                this.close()
                this.$message.success('编辑成功')
                this.getlist()
              }).catch(err => {
                console.log(err)
                this.$message.error(err)
              })
            } else {
              console.log('新增', this.ruleForm)
              let data = {
                languageName: this.ruleForm.languageName,
                fileName: this.ruleForm.fileName,
                isDefault: this.ruleForm.isDefault,
                status: this.ruleForm.status
              }
              langtypeSaveLanguage(data).then(res => {
                console.log(res)
                this.close()
                this.$message.success('新增成功')
                this.getlist()
              }).catch(err => {
                console.log(err)
                this.$message.error(err)
              })
            }
          } else {
            this.$message.error('请填写完整信息')
          }
        });
      },
      getlist() {
        this.loading = true
        langtypeList(this.from).then(res => {
          console.log(res)
          this.tableData.data = res.list
          this.tableData.total = res.total
          this.loading = false
        }).catch(err => {
          console.log(err)
          this.loading = false
        })
      },
      pageChange(page) {
        this.from.page = page
        this.getlist()
      },
      handleSizeChange(val) {
        this.from.limit = val
        this.getlist()
      }
    },
  };
</script>

<style scoped lang="scss">

</style>
